---
title: استخدام الخطوط المخصصة
sidebar:
  label: الخطوط
description: >
  هل ترغب في إضافة خطوط مخصصة إلى موقع ويب Astro؟
  يمكنك استخدام Google Fonts مع Fontsource أو إضافة أي خط من اختيارك بسهولة.
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { Steps } from '@astrojs/starlight/components'

سيرشدك هذا الدليل إلى كيفية إضافة خطوط الويب إلى مشروعك واستخدامها في مكوناتك.

## استخدام ملف خط محلي

سيوضح هذا المثال كيفية إضافة خط مخصص باستخدام ملف الخط `DistantGalaxy.woff`.

<Steps>

1. أضف ملف الخط إلى `public/fonts/`.

2. أضف البيان التالي `@font-face` إلى CSS الخاص بك. يمكن أن يكون ذلك في ملف `.css` عام تستورده، أو في كتلة `<style is:global>`, أو في كتلة `<style>` في تصميم أو مكون معين حيث تريد استخدام هذا الخط.

    ```css
    /*  قم بتسجيل خطك المخصص وأخبر المتصفح بمكان العثور عليه.*/
    @font-face {
      font-family: 'DistantGalaxy';
      src: url('/fonts/DistantGalaxy.woff') format('woff');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    ```

3. استخدم قيمة `font-family` من بيان `@font-face` لتنسيق العناصر في المكون أو التخطيط الخاص بك. في هذا المثال، سيحصل العنوان `<h1>` على الخط المخصص، بينما لن يتأثر الفقرة `<p>`.

    ```astro title="src/pages/example.astro" {9-11}
    ---
    ---
    <h1>في مجرة بعيدة، بعيدة جداً...</h1>

    <p>الخطوط المخصصة تجعل العناوين أكثر روعة!</p>

    <style>
    h1 {
     font-family: 'DistantGalaxy', sans-serif;
    }
    </style>
    ```

</Steps>


## استخدام Fontsource

يُبسط مشروع [Fontsource](https://fontsource.org/) استخدام خطوط Google والخطوط مفتوحة المصدر الأخرى. يوفر وحدات npm التي يمكنك تثبيتها للخطوط التي ترغب في استخدامها.

<Steps>

1. ابحث عن الخط الذي تريد استخدامه في [كتالوج Fontsource](https://fontsource.org/). في هذا المثال، سيتم استخدام [Twinkle Star](https://fontsource.org/fonts/twinkle-star).

2. قم بتثبيت الحزمة الخاصة بالخط الذي اخترته باستخدام أداة إدارة الحزم مثل npm، pnpm أو yarn.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install @fontsource/twinkle-star
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add @fontsource/twinkle-star
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add @fontsource/twinkle-star
      ```
      </Fragment>
    </PackageManagerTabs>

    :::tip
    ستجد اسم الحزمة الصحيح في قسم "التثبيت السريع" في كل صفحة خط على موقع Fontsource. سيبدأ بـ `@fontsource/` أو `@fontsource-variable/` يليه اسم الخط.
    :::

3. استورد حزمة الخط في المكون الذي ترغب في استخدام الخط فيه. عادةً، يجب أن تقوم بذلك في مكون تخطيط مشترك لضمان توفر الخط عبر موقعك.

    سيقوم الاستيراد بإضافة القواعد اللازمة لـ `@font-face` تلقائيًا لإعداد الخط.

    ```astro title="src/layouts/BaseLayout.astro"
    ---
    import '@fontsource/twinkle-star';
    ---
    ```

4. استخدم اسم الخط كما هو موضح في مثال `body` في صفحة Fontsource كقيمة لـ `font-family`. هذا سيعمل في أي مكان يمكنك كتابة CSS فيه في مشروعك باستخدام Astro.

    ```css
    h1 {
      font-family: "Twinkle Star", cursive;
    }
    ```

</Steps>

لتحسين أوقات عرض موقعك، قد ترغب في تحميل الخطوط الأساسية التي تحتاجها الصفحة في البداية. راجع [دليل Fontsource لتحميل الخطوط مسبقًا](https://fontsource.org/docs/getting-started/preload) لمزيد من المعلومات والاستخدام.

## تسجيل الخطوط في Tailwind
 
إذا كنت تستخدم [تكامل Tailwind](/ar/guides/integrations-guide/tailwind/)، يمكنك استخدام أي من الطرق السابقة في هذه الصفحة لتثبيت الخط، مع بعض التعديلات. يمكنك إما إضافة جملة [`@font-face` لخط محلي](#استخدام-ملف-خط-محلي) أو استخدام [استراتيجية الاستيراد الخاصة بـ Fontsource](#استخدام-fontsource) لتثبيت خطك.

لتسجيل خطك في Tailwind:

<Steps>

1. اتبع أيًا من الأدلة السابقة، ولكن تخطَّ الخطوة الأخيرة من إضافة `font-family` إلى CSS.

2. أضف اسم الخط إلى `tailwind.config.mjs`.

    هذا المثال يضيف `Inter` إلى مجموعة الخطوط بدون سيريف، مع الخطوط الاحتياطية الافتراضية من Tailwind CSS.

    ```js title="tailwind.config.mjs" ins={1,8-10}
    import defaultTheme from 'tailwindcss/defaultTheme'

    /** @type {import('tailwindcss').Config} */
    export default {
    	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
    	theme: {
    		extend: {
    			fontFamily: {
    				sans: ['Inter', ...defaultTheme.fontFamily.sans],
    			},
    		},
    	},
    	plugins: [],
    }
    ```

    الآن، سيستخدم كل النص بدون سيريف (الافتراضي في Tailwind) في مشروعك الخط الذي اخترته، وستقوم أيضًا فئة `font-sans` بتطبيق خط Inter.
</Steps>

راجع [توثيق Tailwind حول إضافة عائلات الخطوط المخصصة](https://tailwindcss.com/docs/font-family#using-custom-values) لمزيد من المعلومات.

## المزيد من الموارد

- تعرف على كيفية عمل خطوط الويب في [دليل MDN لخطوط الويب](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts).
- توليد CSS لخطك باستخدام [مولد الخطوط الويب من Font Squirrel](https://www.fontsquirrel.com/tools/webfont-generator).
